<template>
  <div
    class="project-container"
    ref="container"
    v-loading="isLoading"
    @scroll="handleScroll"
  >
    <ul>
      <li class="project-item" v-for="project in data" :key="project.id">
        <div class="thumb">
          <a target="_blank" :href="project.url">
            <img v-lazy="project.thumb" :alt="project.name" />
          </a>
        </div>
        <div class="main">
          <h2 class="title">
            <a target="_blank" :href="project.url">{{ project.name }}</a>
          </h2>
          <div class="github" v-if="project.github">
            <a target="_blank" :href="project.github">github</a>
          </div>
          <div class="desc">
            <p
              class="desc-item"
              v-for="(desc, i) in project.description"
              :key="i"
            >
              <a target="_blank" :href="project.url">
                {{ desc }}
              </a>
            </p>
          </div>
        </div>
      </li>
    </ul>
    <Empty v-if="!isLoading && !data.length" />
  </div>
</template>

<script>
import Empty from "../components/Empty.vue";

export default {
  components: {
    Empty,
  },
  computed: {
    isLoading() {
      return this.$store.state.project.isLoading;
    },
    data() {
      return this.$store.state.project.data;
    },
  },
  async created() {
    this.$bus.$on("setMainScroll", this.handleSetMainScroll);
    this.$store.dispatch("project/fetchData");
  },
  destroyed() {
    this.$bus.$emit("mainScroll", null);
    this.$bus.$off("setMainScroll", this.handleSetMainScroll);
  },
  methods: {
    handleSetMainScroll(scrollTop) {
      this.$refs.container.scrollTop = scrollTop;
    },
    handleScroll(e) {
      this.$bus.$emit("mainScroll", e.target);
    },
  },
};
</script>

<style lang="less" scoped>
.project-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  scroll-behavior: smooth;
  overflow-y: auto;
  .project-item {
    padding: 20px;
    display: flex;
    min-width: 600px;
    transition: all 0.3s;
    .thumb {
      width: 250px;
      flex: 0 0 auto;
      margin-right: 15px;
      img {
        width: 100%;
        display: block;
      }
    }
    .main {
      line-height: 1.7;
      flex: 1 1 auto;
      .desc {
        .desc-item {
          margin: 10px 0;
        }
      }
    }
    &:hover {
      transform: translate(3px, -3px);
      box-shadow: -1px 1px 5px #000;
    }
  }
}
</style>